<template>
    <div>
        <table class="wq text-center" border="0" cellpadding="0" cellspacing="1">
            <tr class="t_list_caption">
                <td v-for="(item,index) in 9" :key="index"><label class="flexbox"><input type="radio" name="radiotype" :value="index" v-model="continuousData.radioopt" @change="radioChange"></label></td>
            </tr>
            <tr class="t_td_text">
                <td>任选二</td>
                <td>任选三</td>
                <td>任选四</td>
                <td>任选五</td>
                <td>任选六</td>
                <td>任选七</td>
                <td>任选八</td>
                <td>前二组选</td>
                <td>前三组选</td>
            </tr>
            <tr class="t_td_text">
                <td class="colorRed bolds">{{ratedata['选号:任选二:$fn']}}</td>
                <td class="colorRed bolds">{{ratedata['选号:任选三:$fn']}}</td>
                <td class="colorRed bolds">{{ratedata['选号:任选四:$fn']}}</td>
                <td class="colorRed bolds">{{ratedata['选号:任选五:$fn']}}</td>
                <td class="colorRed bolds">{{ratedata['选号:任选六:$fn']}}</td>
                <td class="colorRed bolds">{{ratedata['选号:任选七:$fn']}}</td>
                <td class="colorRed bolds">{{ratedata['选号:任选八:$fn']}}</td>
                <td class="colorRed bolds">{{ratedata['选号:前二组选:$fn']}}</td>
                <td class="colorRed bolds">{{ratedata['选号:前三组选:$fn']}}</td>
            </tr>
        </table>
        <table class="wq text-center" border="0" cellpadding="0" cellspacing="1">
            <tr class="t_list_caption">
                <td colspan="12">号码</td>
            </tr>
            <tr class="t_td_text">
                <td><span class="No_gd01"></span></td>
                <td><label class="flexbox"><input type="checkbox" name="checkboxtype" v-model="moneydata['1']" @change="checkboxChange" :disabled="(continuousData.radioopt == 0 ? continuousData.betArr.length > 1 : continuousData.radioopt == 1 ? continuousData.betArr.length > 2 : continuousData.radioopt == 2 ? continuousData.betArr.length > 3 : continuousData.radioopt == 3 ? continuousData.betArr.length > 4 : continuousData.radioopt == 4 ? continuousData.betArr.length > 5 : continuousData.radioopt == 5 ? continuousData.betArr.length > 6 : continuousData.radioopt == 6 ? continuousData.betArr.length > 7 : continuousData.betArr.length > 4 ) && !moneydata['1']"></label></td>
                <td><span class="No_gd02"></span></td>
                <td><label class="flexbox"><input type="checkbox" name="checkboxtype" v-model="moneydata['2']" @change="checkboxChange" :disabled="(continuousData.radioopt == 0 ? continuousData.betArr.length > 1 : continuousData.radioopt == 1 ? continuousData.betArr.length > 2 : continuousData.radioopt == 2 ? continuousData.betArr.length > 3 : continuousData.radioopt == 3 ? continuousData.betArr.length > 4 : continuousData.radioopt == 4 ? continuousData.betArr.length > 5 : continuousData.radioopt == 5 ? continuousData.betArr.length > 6 : continuousData.radioopt == 6 ? continuousData.betArr.length > 7 : continuousData.betArr.length > 4 ) && !moneydata['2']"></label></td>
                <td><span class="No_gd03"></span></td>
                <td><label class="flexbox"><input type="checkbox" name="checkboxtype" v-model="moneydata['3']" @change="checkboxChange" :disabled="(continuousData.radioopt == 0 ? continuousData.betArr.length > 1 : continuousData.radioopt == 1 ? continuousData.betArr.length > 2 : continuousData.radioopt == 2 ? continuousData.betArr.length > 3 : continuousData.radioopt == 3 ? continuousData.betArr.length > 4 : continuousData.radioopt == 4 ? continuousData.betArr.length > 5 : continuousData.radioopt == 5 ? continuousData.betArr.length > 6 : continuousData.radioopt == 6 ? continuousData.betArr.length > 7 : continuousData.betArr.length > 4 ) && !moneydata['3']"></label></td>
                <td><span class="No_gd04"></span></td>
                <td><label class="flexbox"><input type="checkbox" name="checkboxtype" v-model="moneydata['4']" @change="checkboxChange" :disabled="(continuousData.radioopt == 0 ? continuousData.betArr.length > 1 : continuousData.radioopt == 1 ? continuousData.betArr.length > 2 : continuousData.radioopt == 2 ? continuousData.betArr.length > 3 : continuousData.radioopt == 3 ? continuousData.betArr.length > 4 : continuousData.radioopt == 4 ? continuousData.betArr.length > 5 : continuousData.radioopt == 5 ? continuousData.betArr.length > 6 : continuousData.radioopt == 6 ? continuousData.betArr.length > 7 : continuousData.betArr.length > 4 ) && !moneydata['4']"></label></td>
                <td><span class="No_gd05"></span></td>
                <td><label class="flexbox"><input type="checkbox" name="checkboxtype" v-model="moneydata['5']" @change="checkboxChange" :disabled="(continuousData.radioopt == 0 ? continuousData.betArr.length > 1 : continuousData.radioopt == 1 ? continuousData.betArr.length > 2 : continuousData.radioopt == 2 ? continuousData.betArr.length > 3 : continuousData.radioopt == 3 ? continuousData.betArr.length > 4 : continuousData.radioopt == 4 ? continuousData.betArr.length > 5 : continuousData.radioopt == 5 ? continuousData.betArr.length > 6 : continuousData.radioopt == 6 ? continuousData.betArr.length > 7 : continuousData.betArr.length > 4 ) && !moneydata['5']"></label></td>
                <td><span class="No_gd06"></span></td>
                <td><label class="flexbox"><input type="checkbox" name="checkboxtype" v-model="moneydata['6']" @change="checkboxChange" :disabled="(continuousData.radioopt == 0 ? continuousData.betArr.length > 1 : continuousData.radioopt == 1 ? continuousData.betArr.length > 2 : continuousData.radioopt == 2 ? continuousData.betArr.length > 3 : continuousData.radioopt == 3 ? continuousData.betArr.length > 4 : continuousData.radioopt == 4 ? continuousData.betArr.length > 5 : continuousData.radioopt == 5 ? continuousData.betArr.length > 6 : continuousData.radioopt == 6 ? continuousData.betArr.length > 7 : continuousData.betArr.length > 4 ) && !moneydata['6']"></label></td>
            </tr>
            <tr class="t_td_text">
                <td><span class="No_gd07"></span></td>
                <td><label class="flexbox"><input type="checkbox" name="checkboxtype" v-model="moneydata['7']" @change="checkboxChange" :disabled="(continuousData.radioopt == 0 ? continuousData.betArr.length > 1 : continuousData.radioopt == 1 ? continuousData.betArr.length > 2 : continuousData.radioopt == 2 ? continuousData.betArr.length > 3 : continuousData.radioopt == 3 ? continuousData.betArr.length > 4 : continuousData.radioopt == 4 ? continuousData.betArr.length > 5 : continuousData.radioopt == 5 ? continuousData.betArr.length > 6 : continuousData.radioopt == 6 ? continuousData.betArr.length > 7 : continuousData.betArr.length > 4 ) && !moneydata['7']"></label></td>
                <td><span class="No_gd08"></span></td>
                <td><label class="flexbox"><input type="checkbox" name="checkboxtype" v-model="moneydata['8']" @change="checkboxChange" :disabled="(continuousData.radioopt == 0 ? continuousData.betArr.length > 1 : continuousData.radioopt == 1 ? continuousData.betArr.length > 2 : continuousData.radioopt == 2 ? continuousData.betArr.length > 3 : continuousData.radioopt == 3 ? continuousData.betArr.length > 4 : continuousData.radioopt == 4 ? continuousData.betArr.length > 5 : continuousData.radioopt == 5 ? continuousData.betArr.length > 6 : continuousData.radioopt == 6 ? continuousData.betArr.length > 7 : continuousData.betArr.length > 4 ) && !moneydata['8']"></label></td>
                <td><span class="No_gd09"></span></td>
                <td><label class="flexbox"><input type="checkbox" name="checkboxtype" v-model="moneydata['9']" @change="checkboxChange" :disabled="(continuousData.radioopt == 0 ? continuousData.betArr.length > 1 : continuousData.radioopt == 1 ? continuousData.betArr.length > 2 : continuousData.radioopt == 2 ? continuousData.betArr.length > 3 : continuousData.radioopt == 3 ? continuousData.betArr.length > 4 : continuousData.radioopt == 4 ? continuousData.betArr.length > 5 : continuousData.radioopt == 5 ? continuousData.betArr.length > 6 : continuousData.radioopt == 6 ? continuousData.betArr.length > 7 : continuousData.betArr.length > 4 ) && !moneydata['9']"></label></td>
                <td><span class="No_gd10"></span></td>
                <td><label class="flexbox"><input type="checkbox" name="checkboxtype" v-model="moneydata['10']" @change="checkboxChange" :disabled="(continuousData.radioopt == 0 ? continuousData.betArr.length > 1 : continuousData.radioopt == 1 ? continuousData.betArr.length > 2 : continuousData.radioopt == 2 ? continuousData.betArr.length > 3 : continuousData.radioopt == 3 ? continuousData.betArr.length > 4 : continuousData.radioopt == 4 ? continuousData.betArr.length > 5 : continuousData.radioopt == 5 ? continuousData.betArr.length > 6 : continuousData.radioopt == 6 ? continuousData.betArr.length > 7 : continuousData.betArr.length > 4 ) && !moneydata['10']"></label></td>
                <td><span class="No_gd11"></span></td>
                <td><label class="flexbox"><input type="checkbox" name="checkboxtype" v-model="moneydata['11']" @change="checkboxChange" :disabled="(continuousData.radioopt == 0 ? continuousData.betArr.length > 1 : continuousData.radioopt == 1 ? continuousData.betArr.length > 2 : continuousData.radioopt == 2 ? continuousData.betArr.length > 3 : continuousData.radioopt == 3 ? continuousData.betArr.length > 4 : continuousData.radioopt == 4 ? continuousData.betArr.length > 5 : continuousData.radioopt == 5 ? continuousData.betArr.length > 6 : continuousData.radioopt == 6 ? continuousData.betArr.length > 7 : continuousData.betArr.length > 4 ) && !moneydata['11']"></label></td>
                <td colspan="2"></td>
            </tr>
            
        </table>

    </div>
    
    
</template>
<style scoped>
    input[name='radiotype'],input[name='checkboxtype']{
        margin: 3px auto;
    }
</style>

<script>

    var timer = null;
    import axios from 'axios'
    import {lotterytype} from '../../../../assets/js/lotterytype.js'
    export default {
        name: "SdContinuous",
        props: {  //普通类型：String、Number、Boolean、Null    引用类型： Array、Object
            betmoney: {   //   下注金额
                type: String,
                required: true
            },
            openBet: {  //开奖  可下注
                type: Boolean,
                required: true
            },
            ninetime: {  //90s
                type: Number,
                required: true
            },
        },
        data(){
            return{
                ratedata: {},  //实时赔率
                params: {},  //菜单
                moneydata: {},  //是否下注
                continuousData: {
                    betArr: [],  //下注数组
                    radioopt: 0,  //当前类别
                    betnowtype: 0,  //当前类别 赔率
                },
                
            }
        },
        methods: {
            init(){

                var _this = this;

                this.params = lotterytype.apiParams(this.$route.query.id,this.$route.query.levelid);

                if(window.localStorage.Authorization){
                    
                    _this.$httpGet('/api/game/listRate/'+ _this.params.nowlottery + '/' + _this.params.levellottery +'oa18').then(response => {
                        
                        if(response.status == 200){
                            _this.ratedata = response.data.rates;
                            _this.continuousData.betnowtype = response.data.rates['选号:任选二:$fn'];
                            _this.$emit('contBetFun',_this.continuousData);

                            if(response.data.need){
                                _this.$httpPost('/api/setting/rateItem/'+ _this.params.nowlottery + '/' + _this.params.levellottery +'oa18').then(response => {
                                
                                    if(response.status == 200){
                                        
                                    }

                                });
                            }
                        }

                    });

                }
            },
            inits(){

                var _this = this;

                this.params = lotterytype.apiParams(this.$route.query.id,this.$route.query.levelid);

                if(window.localStorage.Authorization){
                    
                    if (timer) {
                        clearInterval(timer);
                        timer = null;
                    }

                    _this.$httpGet('/api/game/listRate/'+ _this.params.nowlottery + '/' + _this.params.levellottery +'oa18').then(response => {
                        
                        if(response.status == 200){
                            _this.ratedata = response.data.rates;
                            _this.continuousData.betnowtype = response.data.rates['选号:任选二:$fn'];
                            _this.$emit('contBetFun',_this.continuousData);

                            if(response.data.need){
                                _this.$httpPost('/api/setting/rateItem/'+ _this.params.nowlottery + '/' + _this.params.levellottery +'oa18').then(response => {
                                
                                    if(response.status == 200){
                                        
                                    }

                                });
                            }

                            timer = setInterval(() => {
                                _this.inits();
                            }, 10 * 1000)
                        }

                    });

                }
            },
            //切换类别
            radioChange(){

                if(this.continuousData.radioopt == 0){  //任选二
                    this.continuousData.betnowtype = this.ratedata['选号:任选二:$fn'];
                }else if(this.continuousData.radioopt == 1){  //任选三
                    this.continuousData.betnowtype = this.ratedata['选号:任选三:$fn'];
                }else if(this.continuousData.radioopt == 2){  //任选四
                    this.continuousData.betnowtype = this.ratedata['选号:任选四:$fn'];
                }else if(this.continuousData.radioopt == 3){  //任选五
                    this.continuousData.betnowtype = this.ratedata['选号:任选五:$fn'];
                }else if(this.continuousData.radioopt == 4){  //任选六
                    this.continuousData.betnowtype = this.ratedata['选号:任选六:$fn'];
                }else if(this.continuousData.radioopt == 5){  //任选七
                    this.continuousData.betnowtype = this.ratedata['选号:任选七:$fn'];
                }else if(this.continuousData.radioopt == 5){  //任选八
                    this.continuousData.betnowtype = this.ratedata['选号:任选八:$fn'];
                }else if(this.continuousData.radioopt == 5){  //前二组选
                    this.continuousData.betnowtype = this.ratedata['选号:前二组选:$fn'];
                }else if(this.continuousData.radioopt == 5){  //前三组选
                    this.continuousData.betnowtype = this.ratedata['选号:前三组选:$fn'];
                }

                this.moneydata = {};
                this.continuousData.betArr = [];
                console.log(this.moneydata);
                this.$emit('contBetFun',this.continuousData);

            },
            //
            checkboxChange(item){

                this.continuousData.betArr = [];

                for (var index in this.moneydata){

                    if(this.moneydata[index]){
                        this.continuousData.betArr.push(index);
                    }

                }

                this.$emit('contBetFun',this.continuousData);

            },
            
        },
        mounted(){
            this.inits();
        },
        beforeDestroy(){
            clearInterval(timer);
        },
        watch :{
            openBet: function(now,old){
                console.log(now,old);
                this.init();
            },
            ninetime: function(now,old){
                console.log('------------90s  刷新');
                //90s  刷新数据
                this.init();
            },
        },
    }
</script>
